<template>
	<view class="content font_family">
		<view class="top">
			<view class="top_search f_j">
				<image class="ss" src="../../static/index/ss_icon.png" mode=""></image>
				<u--input placeholder="请输入关键词检索" border="none" v-model="query_data.keyword"
					@confirm='confirm'></u--input>
			</view>
			<view class="dq_dl f">
				<image class="dq" src="../../static/index/dq_dl.png" mode=""></image>
				<view class="msg">
					<view class="title">
						当前选择店铺
					</view>
					<view class="name">
						{{dl_msg.name}}
					</view>
				</view>
				<view class="km f_d f_j f_z_b">
					<image class="go_dl" src="../../static/index/go_dl.png" mode=""
						@click="go_location(dl_msg.latitude,dl_msg.longitude)"></image>
					<text class="num">{{dl_msg.distance | conversion_km}}</text>
				</view>
			</view>
		</view>
		<view class="fj_dl">
			<view class="fj_title f_j">
				<image src="../../static/index/fj_dl.png" mode=""></image>
				<view class="">
					附近店铺
				</view>
			</view>
			<view class="item f_j" v-for="(item,index) in list" :key="index" @click="dl_check(item)">
				<view class="msg">
					<view class="name">
						{{item.name}}
					</view>
					<view class="address">
						{{item.address}}
					</view>
				</view>
				<view class="km f_d f_j f_z_b">
					<image class="go_fj" src="../../static/index/go_dl.png" mode=""
						@click.stop="go_location(item.latitude,item.longitude)"></image>
					<text class="num">{{item.distance | conversion_km}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import { get_dl_list } from '@/api/page.js'
	export default {
		computed: {
			...mapState(['dl_id', 'dl_msg'])
		},
		data() {
			return {
				query_data: {
					keyword: ''
				},
				list: []
			}
		},
		onLoad() {
			this.get_list()
		},
		methods: {
			...mapMutations(['set_dl_id', 'set_dl_msg']),
			get_list() {
				get_dl_list(this.query_data).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			go_location(latitude, longitude) {
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude)
				})
			},
			dl_check(item) { //选择代理店铺
				uni.setStorageSync('dl_id', item.user_id)
				uni.setStorageSync('dl_msg', item)
				this.set_dl_id(item.user_id)
				this.set_dl_msg(item)
				this.back()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.top {
			background: linear-gradient(to bottom, rgb(246, 240, 238) 0%, rgb(255, 255, 255) 60%);
			background: #FFFFFF;
			padding: 30rpx;
			padding-bottom: 20rpx;

			.top_search {
				padding: 15rpx 30rpx;
				background: #F6F7F9;
				border-radius: 630rpx 630rpx 630rpx 630rpx;

				.ss {
					width: 32rpx;
					height: 32rpx;
					margin-right: 30rpx;
				}
			}

			.dq_dl {
				margin-top: 20rpx;

				.dq {
					width: 36rpx;
					height: 36rpx;
				}

				.msg {
					flex: 1;
					margin-left: 20rpx;

					.title {
						font-size: 28rpx;
						color: #3D3D3D;
					}

					.name {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}

				.km {
					.num {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}

				.go_dl {
					align-self: flex-end;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.fj_dl {
			background-color: #FFFFFF;
			margin-top: 15rpx;
			padding: 30rpx;

			.fj_title {
				font-size: 28rpx;
				color: #3D3D3D;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
			}

			.item {
				padding: 25rpx 0rpx;
				border-bottom: 2rpx solid #DEDEDE;

				.msg {
					flex: 1;
					margin-left: 52rpx;

					.name {
						font-size: 28rpx;
						color: #232323;
					}

					.address {
						margin-top: 15rpx;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.km {
					.num {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}

				.go_fj {
					margin-left: 40rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
</style>